<template>


  <page-header-wrapper>
    <template #extra>
      <a-button type="primary" @click="backToList" :disabled="loading">
        返回订单列表
      </a-button>
    </template>
    <div class="table-page-search-wrapper">
      <a-card>
        <a-spin :spinning="state.isRefreshing||orderInfo==null" style="width: 100%" size="large">
          <div class="order-outer" v-if="orderInfo!=null">
            <div class="order-status-outer">
              <div class="title-font" style="display: flex;justify-content: space-between;align-items: center">
                订单状态

              </div>
              <div v-if="orderInfo.state<5">

                <div class="order-status show-min-576px">
                  <a-steps labelPlacement="vertical" :current="orderInfo.state-1" :initial="0">
                    <a-step v-for="item in steps" :key="item.title">
                      <template #title>
                  <span style="font-weight: bold;display: flex;flex-direction: row;align-items: center">
                    {{ item.title }}

                  </span>
                      </template>
                    </a-step>
                  </a-steps>

                </div>
                <div class="order-status show-max-576px show-min-480px">
                  <a-steps labelPlacement="vertical" size="small" :current="orderInfo.state-1" :initial="0">
                    <a-step v-for="item in steps" :key="item.title">
                      <template #title>
                  <span style="font-weight: bold;display: flex;flex-direction: row;align-items: center">
                    {{ item.title }}
                  </span>
                      </template>
                    </a-step>
                  </a-steps>
                </div>
                <div class="order-status show-max-480px" style="padding: 0 20px">
                  <a-steps direction="vertical" size="small" :current="orderInfo.state-1" :initial="0">
                    <a-step v-for="item in steps" :key="item.title">
                      <template #title>
                  <span style="font-weight: bold;display: flex;flex-direction: row;align-items: center">
                    {{ item.title }}
                  </span>
                      </template>
                    </a-step>
                  </a-steps>
                </div>
              </div>
              <a-empty v-else-if="orderInfo.state===5" description="订单已取消"></a-empty>
              <a-empty v-else description="取消待审核">
                <a-button v-if="orderInfo.state==6" @click="toCancelOrder(5)" type="danger">
                              <span style="font-weight: normal">
                                通过取消订单
                              </span>
                </a-button>
                <a-button v-if="orderInfo.state==6" @click="toCancelOrder(2)"  type="primary">
                              <span style="font-weight: normal">
                                不通过取消订单
                              </span>
                </a-button>
              </a-empty>
            </div>

            <!--            <a-descriptions bordered size="small">-->
            <!--              <template #title>-->
            <!--                <div class="title-font">-->
            <!--                  订单信息-->
            <!--                </div>-->
            <!--              </template>-->
            <!--              <a-descriptions-item label="订单编号">-->
            <!--                {{-->
            <!--                  (orderInfo.orderNumber != null && orderInfo.orderNumber.trim().length > 0) ? orderInfo.orderNumber.trim() : '未填写'-->
            <!--                }}-->
            <!--              </a-descriptions-item>-->
            <!--              <a-descriptions-item label="用户ID">-->
            <!--                {{-->
            <!--                  (orderInfo.userId != null && orderInfo.userId.trim().length > 0) ? orderInfo.userId.trim() : '未填写'-->
            <!--                }}-->
            <!--              </a-descriptions-item>-->
            <!--              <a-descriptions-item label="姓名">-->
            <!--                {{-->
            <!--                  (orderInfo.recipients != null && orderInfo.recipients.trim().length > 0) ? orderInfo.recipients.trim() : '未填写'-->
            <!--                }}-->
            <!--              </a-descriptions-item>-->
            <!--              <a-descriptions-item label="电话">-->
            <!--                {{ (orderInfo.phone != null && orderInfo.phone.trim().length > 0) ? orderInfo.phone.trim() : '未填写' }}-->
            <!--              </a-descriptions-item>-->
            <!--              <a-descriptions-item label="邮箱">-->
            <!--                {{ (orderInfo.email != null && orderInfo.phone.trim().length > 0) ? orderInfo.phone.trim() : '未填写' }}-->
            <!--              </a-descriptions-item>-->
            <!--              <a-descriptions-item label="国家">-->
            <!--                {{-->
            <!--                  (orderInfo.country != null && orderInfo.country.trim().length > 0) ? orderInfo.country.trim() : '未填写'-->
            <!--                }}-->
            <!--              </a-descriptions-item>-->
            <!--              <a-descriptions-item label="省份">-->
            <!--                {{-->
            <!--                  (orderInfo.province != null && orderInfo.province.trim().length > 0) ? orderInfo.province.trim() : '未填写'-->
            <!--                }}-->
            <!--              </a-descriptions-item>-->
            <!--              <a-descriptions-item label="城市">-->
            <!--                {{ orderInfo.newCity }}-->
            <!--              </a-descriptions-item>-->
            <!--              <a-descriptions-item label="ZIP / Postal code">-->
            <!--                {{ (orderInfo.city != null && orderInfo.city.trim().length > 0) ? orderInfo.city.trim() : '未填写' }}-->
            <!--              </a-descriptions-item>-->
            <!--              <a-descriptions-item label="详细地址">-->
            <!--                {{-->
            <!--                  (orderInfo.address != null && orderInfo.address.trim().length > 0) ? orderInfo.address.trim() : '未填写'-->
            <!--                }}-->
            <!--                <br v-if="orderInfo.others != null && orderInfo.others.trim().length > 0"/>-->
            <!--                {{-->
            <!--                  (orderInfo.others != null && orderInfo.others.trim().length > 0) ? orderInfo.others.trim() : ''-->
            <!--                }}-->
            <!--              </a-descriptions-item>-->
            <!--              <a-descriptions-item label="下单时间">-->
            <!--                {{ orderInfo.createAt }}-->
            <!--              </a-descriptions-item>-->
            <!--            </a-descriptions>-->

            <a-descriptions bordered size="small" layout="vertical" no-padding>
              <template #title>
                <div class="title-font" style="color: rgba(0, 0, 0, 0.65);">
                  订单信息
                </div>
              </template>

              <!--          <a-descriptions-item label="Order No">-->
              <!--            {{ (orderInfo.orderNumber != null && orderInfo.orderNumber.trim().length > 0) ? orderInfo.orderNumber.trim() : 'Not filled in' }}-->
              <!--          </a-descriptions-item>-->
              <!--          <a-descriptions-item label="Full name">-->
              <!--            {{ (orderInfo.recipients != null && orderInfo.recipients.trim().length > 0) ? orderInfo.recipients.trim() : 'Not filled in' }}-->
              <!--          </a-descriptions-item>-->
              <!--          <a-descriptions-item label="Phone">-->
              <!--            {{ (orderInfo.phone != null && orderInfo.phone.trim().length > 0) ? orderInfo.phone.trim() : 'Not filled in' }}-->
              <!--          </a-descriptions-item>-->
              <!--          <a-descriptions-item label="Email">-->
              <!--            {{ (orderInfo.email != null && orderInfo.phone.trim().length > 0) ? orderInfo.phone.trim() : 'Not filled in' }}-->
              <!--          </a-descriptions-item>-->

              <a-descriptions-item style="padding: 0">
                <template #label>
                  <div style="display: inline-block;padding: 8px 16px 8px 8px;">
                    Consignee information
                  </div>

                </template>
                <a-descriptions size="small" :column="1" :contentStyle="{'padding':'8px 8px'}"
                                :labelStyle="{'padding':'8px 8px'}" padding>
                  <a-descriptions-item label="Order No" style="padding-bottom: 0px;">
                    {{
                      (orderInfo.orderNumber != null && orderInfo.orderNumber.trim().length > 0) ? orderInfo.orderNumber.trim() : 'Not filled in'
                    }}
                  </a-descriptions-item>
                  <a-descriptions-item label="Full name" style="padding-bottom: 0px;">
                    {{
                      (orderInfo.recipients != null && orderInfo.recipients.trim().length > 0) ? orderInfo.recipients.trim() : 'Not filled in'
                    }}
                  </a-descriptions-item>
                  <a-descriptions-item label="Phone" style="padding-bottom: 0px;">
                    {{
                      (orderInfo.phone != null && orderInfo.phone.trim().length > 0) ? orderInfo.phone.trim() : 'Not filled in'
                    }}
                  </a-descriptions-item>
                  <a-descriptions-item label="Email" style="padding-bottom: 0px;">
                    {{
                      (orderInfo.email != null && orderInfo.email.trim().length > 0) ? orderInfo.email.trim() : 'Not filled in'
                    }}
                  </a-descriptions-item>
                  <a-descriptions-item label="Create Time" style="padding-bottom: 0px;">
                    {{
                      (orderInfo.createAt != null && orderInfo.createAt.trim().length > 0) ? orderInfo.createAt.trim() : 'Not filled in'
                    }}
                  </a-descriptions-item>
                </a-descriptions>
              </a-descriptions-item>
              <a-descriptions-item label="Receiving Address" :style="{'padding':'8px'}">

                <div v-html="fullAddress" style="height: 100%;padding: 8px 16px">
                </div>
                <!--            {{ (orderInfo.country  != null && orderInfo.country.trim().length > 0) ? orderInfo.country.trim() : '' }}-->
                <!--            {{ (orderInfo.province != null && orderInfo.province.trim().length > 0) ? orderInfo.province.trim() : '' }}-->
                <!--            {{ (orderInfo.city     != null && orderInfo.city.trim().length > 0) ? orderInfo.city.trim() : '' }}-->
                <!--            {{ (orderInfo.address  != null && orderInfo.address.trim().length > 0) ? orderInfo.address.trim() : '' }}-->
                <!--            {{ (orderInfo.others   != null && orderInfo.others.trim().length > 0) ? ( orderInfo.others.trim()) : '' }}-->
                <!--            {{ (orderInfo.newCity  != null && orderInfo.newCity.trim().length > 0) ? orderInfo.newCity.trim() : '' }}-->
              </a-descriptions-item>

              <!--          <a-descriptions-item label="Country">-->
              <!--            {{ (orderInfo.country != null && orderInfo.country.trim().length > 0) ? orderInfo.country.trim() : 'Not filled in' }}-->
              <!--          </a-descriptions-item>-->
              <!--          <a-descriptions-item label="State / Province">-->
              <!--            {{ (orderInfo.province != null && orderInfo.province.trim().length > 0) ? orderInfo.province.trim() : 'Not filled in' }}-->
              <!--          </a-descriptions-item>-->
              <!--          <a-descriptions-item label="ZIP / Postal code">-->
              <!--            {{ (orderInfo.city != null && orderInfo.city.trim().length > 0) ? orderInfo.city.trim() : 'Not filled in' }}-->
              <!--          </a-descriptions-item>-->
              <!--          <a-descriptions-item label="Address" :span="5">-->
              <!--            {{ (orderInfo.address != null && orderInfo.address.trim().length > 0) ? orderInfo.address.trim() : 'Not filled in' }}-->

              <!--            <br v-if="orderInfo.others != null && orderInfo.others.trim().length > 0"/>-->
              <!--            {{ (orderInfo.others != null && orderInfo.others.trim().length > 0) ? ( orderInfo.others.trim()) : '' }}-->
              <!--          </a-descriptions-item>-->

              <!--          <a-descriptions-item label="City">-->
              <!--            {{ (orderInfo.newCity != null && orderInfo.newCity.trim().length > 0) ? orderInfo.newCity.trim() : 'Not filled in' }}-->
              <!--          </a-descriptions-item>-->
              <!--          <a-descriptions-item label="Order time">-->
              <!--            {{ orderInfo.createAt  }}-->
              <!--          </a-descriptions-item>-->

            </a-descriptions>


            <div>
              <div class="title-font">
                <span style="line-height: 1">
                   快递信息
                </span>
                <a-button type="primary" size="small" style="margin-left: 10px;" @click="toPreAddDelivery">
                  添加快递信息
                </a-button>
              </div>

              <div class="create-order-list-outer">


                <a-list :bordered="true" :dataSource="orderInfo.delivery!=null?orderInfo.delivery:[]" size="small"
                        :locale="{emptyText:'尚未发货'}">
                  <template #renderItem="item,index">
                    <div style="border-bottom: 1px solid #f0f0f0;padding: 10px;">

                      <div
                        style="display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: space-between;align-items: center;">
                        <div>
                          <div style="display: inline;font-size: 18px;">
                          <span style="font-weight: bold">快递服务商：
                          </span>
                            {{ item.deliveryBusiness == null ? '未知服务商' : item.deliveryBusiness }}
                          </div>
                          <div style="display: inline;font-size: 18px;"><span style="font-weight: bold">快递单号：
                          </span>
                            {{ item.deliveryNumber }}
                          </div>
                        </div>
                        <div>
                          <a-button type="link" @click="toPreEditDelivery(item,index)">编辑</a-button>

                          <a-button type="link" style="margin-left: 10px" @click="toDeleteDelivery(index)">删除该快递信息
                          </a-button>
                        </div>
                      </div>
                      <div>
                        <span style="font-weight: bold">快递备注
                          </span>
                        {{ item.deliveryComment == null ? '无' : item.deliveryComment }}
                      </div>
                    </div>
                  </template>
                </a-list>
              </div>
            </div>

            <div>
              <div class="title-font">
                购买商品信息
              </div>
              <div class="create-order-list-outer">

                <a-table :columns="columns" :data-source="orderInfo.goods!=null?orderInfo.goods:[]" bordered
                         size="small" :pagination="false">
                  <div slot="name" slot-scope="text,record">
                    <div style="display: flex;flex-direction: row;">
                      <div><img :src="record.good.mainImage" style="width: 70px;height: 70px;border-radius: 10px"></div>
                      <div class="basic-font" style="margin-left: 10px;word-wrap: break-word;white-space: normal">
                        {{ record.good.name }}
                        <div>
                          <div style="color: #646266;font-size: 12px;"
                               v-if="record.good.specification.specification!=null">
                            <div v-for="specification in record.good.specification.specification"
                                 style="line-height: 1.1;padding:5px 0;box-sizing: border-box">
                              <div
                                style="background-color: #eeeeee;padding: 3px;border-radius: 5px;font-size: 12px;box-sizing: border-box;word-wrap: break-word;white-space: normal;">
                                {{ specification.key }} : {{ specification.value }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <template #footer>
                    <div style="display: flex;justify-content: flex-end;">

                      <div style="display: inline-block;">

                        <table>
                          <tbody>
                          <tr>
                            <td style="text-align: right">
                              <div class="basic-font" style="color: black;font-size: 16px">
                                商品总计：
                              </div>
                            </td>
                            <td style="text-align: left">
                              <div class="basic-font" style="color: black;font-size: 16px">
                                {{ orderInfo.goodsPrice <= 0 ? 'FREE' : ('$' + orderInfo.goodsPrice) }}
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td style="text-align: right">
                              <div class="basic-font" style="color: black;font-size: 16px">
                                运费总计：
                              </div>
                            </td>
                            <td style="text-align: left">
                              <div class="basic-font" style="color: black;font-size: 16px">
                                {{ orderInfo.freightPrice <= 0 ? 'FREE' : ('$' + orderInfo.freightPrice) }}
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td style="text-align: right">
                              <div class="basic-font" style="color: black;font-size: 16px">
                                总计：
                              </div>
                            </td>
                            <td style="text-align: left">
                              <div class="basic-font" style="color: black;font-size: 16px">
                                {{ orderInfo.totalPrice <= 0 ? 'FREE' : ('$' + orderInfo.totalPrice) }}
                              </div>
                            </td>
                          </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </template>
                </a-table>

                <!--                <a-list :bordered="true" :dataSource="[]" size="small">-->
                <!--                  <template #renderItem=" item ">-->
                <!--                    <a-list-item>-->
                <!--                      <div style="display: flex;flex-direction: row;">-->
                <!--                        <div>-->
                <!--                          <img :src="item.good.mainImage" style="width: 70px;height: 70px;border-radius: 10px">-->
                <!--                        </div>-->
                <!--                        <div>-->
                <!--                          <div>-->
                <!--                            <div class="basic-font" style="margin-left: 10px;">-->
                <!--                              {{ item.good.name }}-->
                <!--                            </div>-->
                <!--                            <div v-for="specification in item.good.specification.specification"-->
                <!--                                 style="line-height: 1.1;padding:5px;box-sizing: border-box">-->
                <!--                          <span-->
                <!--                            style="background-color: #eeeeee;padding: 3px;border-radius: 5px;font-size: 12px;box-sizing: border-box">-->
                <!--                            {{ specification.key }} :  {{ specification.value }}-->
                <!--                          </span>-->
                <!--                            </div>-->
                <!--                          </div>-->
                <!--                        </div>-->
                <!--                      </div>-->
                <!--                      <template #actions>-->
                <!--                        <div class="basic-font" style="color: black;font-size: 16px">-->
                <!--                          {{-->
                <!--                            item.price == null || item.good.specification.price <= 0 ? 'FREE' : ('$' + item.price)-->
                <!--                          }} &nbsp;<span style="font-size: 12px;">✖</span>&nbsp;-->
                <!--                          {{ item.number }}-->
                <!--                        </div>-->
                <!--                      </template>-->
                <!--                    </a-list-item>-->
                <!--                  </template>-->
                <!--                  <template #footer>-->
                <!--                    <a-list-item>-->
                <!--                      <span></span>-->
                <!--                      <template #actions>-->
                <!--                        <table>-->
                <!--                          <tbody>-->
                <!--                          <tr>-->
                <!--                            <td style="text-align: right">-->
                <!--                              <div class="basic-font" style="color: black;font-size: 16px">-->
                <!--                                商品总计：-->
                <!--                              </div>-->
                <!--                            </td>-->
                <!--                            <td style="text-align: left">-->
                <!--                              <div class="basic-font" style="color: black;font-size: 16px">-->
                <!--                                {{ orderInfo.goodsPrice <= 0 ? 'FREE' : ('$' + orderInfo.goodsPrice) }}-->
                <!--                              </div>-->
                <!--                            </td>-->
                <!--                          </tr>-->
                <!--                          <tr>-->
                <!--                            <td style="text-align: right">-->
                <!--                              <div class="basic-font" style="color: black;font-size: 16px">-->
                <!--                                运费总计：-->
                <!--                              </div>-->
                <!--                            </td>-->
                <!--                            <td style="text-align: left">-->
                <!--                              <div class="basic-font" style="color: black;font-size: 16px">-->
                <!--                                {{ orderInfo.freightPrice <= 0 ? 'FREE' : ('$' + orderInfo.freightPrice) }}-->
                <!--                              </div>-->
                <!--                            </td>-->
                <!--                          </tr>-->
                <!--                          <tr>-->
                <!--                            <td style="text-align: right">-->
                <!--                              <div class="basic-font" style="color: black;font-size: 16px">-->
                <!--                                总计：-->
                <!--                              </div>-->
                <!--                            </td>-->
                <!--                            <td style="text-align: left">-->
                <!--                              <div class="basic-font" style="color: black;font-size: 16px">-->
                <!--                                {{ orderInfo.totalPrice <= 0 ? 'FREE' : ('$' + orderInfo.totalPrice) }}-->
                <!--                              </div>-->
                <!--                            </td>-->
                <!--                          </tr>-->
                <!--                          </tbody>-->
                <!--                        </table>-->
                <!--                      </template>-->
                <!--                    </a-list-item>-->
                <!--                  </template>-->
                <!--                </a-list>-->
              </div>
            </div>

          </div>
          <a-skeleton v-else :loading="state.isRefreshing||orderInfo==null">
          </a-skeleton>
        </a-spin>
      </a-card>

      <a-modal
        v-model:visible="state.showSendModalState"
        @ok="toSubmit"
        @cancel="state.showSendModalState=false"
      >
        <a-row type="flex" justify="center" align="top" v-if="state.sendDate!=null">
          <a-col :span="18">
            <a-form layout="horizontal">
              <a-form-item style="margin-top: 10px"></a-form-item>
              <a-form-item label="快递商"
                           :label-col="{span: 6}"
                           :wrapper-col="{ span: 18 }"
              >
                <a-input-group size="large">
                  <a-row>
                    <a-col>
                      <a-input v-model="state.sendDate.deliveryBusiness"/>
                    </a-col>
                  </a-row>
                </a-input-group>
              </a-form-item>
              <a-form-item label="快递单号"
                           :label-col="{span: 6}"
                           :wrapper-col="{ span: 18 }"
              >
                <a-input-group size="large">
                  <a-row>
                    <a-col>
                      <a-input v-model="state.sendDate.deliveryNumber"/>
                    </a-col>
                  </a-row>
                </a-input-group>
              </a-form-item>
              <a-form-item label="快递备注"
                           :label-col="{span: 6}"
                           :wrapper-col="{ span: 18 }"
              >
                <a-input-group size="large">
                  <a-row>
                    <a-col>
                      <a-input v-model="state.sendDate.deliveryComment"/>
                    </a-col>
                  </a-row>
                </a-input-group>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </a-modal>
    </div>

  </page-header-wrapper>
</template>

<script>
import {
  cancelOrder,
  checkCancelOrder,
  editDelivery,
  searchOrderById,
  sendOrder
} from "@/api/modules/OrderActionRequest";
import router from '@/router'
import {notification} from "ant-design-vue";


const steps = [
  {
    title: '待支付',
    state: 1
  },
  {
    title: '待发货',
    state: 2
  },
  {
    title: '已发货',
    state: 3
  },
  {
    title: '已收货',
    state: 4
  },
]
const columns = [
  {
    scopedSlots: {customRender: 'name'},
    key: 'id',
    title: '商品'
  },
  {
    dataIndex: 'good.specification.type',
    key: 'id',
    title: '型号'
  },
  {
    dataIndex: 'number',
    key: 'id',
    title: '商品'
  },
  {
    dataIndex: 'price',
    key: 'id',
    title: '单品价格'
  },
  {
    title: '商品小计',
    customRender(t, r) {
      return r.price * r.number
    }
  },
]
export default {
  name: "Order",
  data() {
    return {
      columns,
      state: {
        isRefreshing: false,
        showSendModalState: false,
        index: null,
        sendDate: null
      },
      orderInfo: null,
      steps
    }
  },
  mounted() {
    this.toRefreshOrder();
  },
  computed: {
    fullAddress() {
      let str = '';
      let orderInfo = {
        value: JSON.parse(JSON.stringify(this.orderInfo))
      }
      for (let valueKey in orderInfo.value) {
        if (orderInfo.value[valueKey] == null || (typeof orderInfo.value[valueKey] == 'string' && orderInfo.value[valueKey].trim().length == 0)) {
          delete orderInfo.value[valueKey]
        }
      }
      if (orderInfo.value == null) return null
      if (orderInfo.value.recipients != null) str += '<br/>' + orderInfo.value.recipients;
      if (orderInfo.value.address != null) str += '<br/>' + orderInfo.value.address;
      if (orderInfo.value.others != null) str += '<br/>' + orderInfo.value.others;
      if (orderInfo.value.province != null || orderInfo.value.city != null || orderInfo.value.newCity) {
        let sArr = [orderInfo.value.newCity, orderInfo.value.province, orderInfo.value.city]
        str += '<br/>' + sArr.filter((val) => {
          return val != null
        }).join(', ')
        // str += '<br/>' + orderInfo.value.newCity + ' ' + orderInfo.value.province + ' ' + orderInfo.value.city;
      }
      if (orderInfo.value.country != null) str += '<br/>' + orderInfo.value.country;
      if (str.startsWith('<br/>')) {
        str = str.slice(5, str.length);
      }
      return str;
    }
  },
  methods: {
    toRefreshOrder() {
      if (this.state.isRefreshing) return;
      this.state.isRefreshing = true;
      let _this = this;
      searchOrderById(router.currentRoute.params.id).then((res) => {
        res.data.goods = JSON.parse(res.data.goods)
        if (res.data.goods != undefined) {
          for (let i = 0; i < res.data.goods.length; i++) {
            //@ts-ignored
            res.data.goods[i].good.specification.specification = JSON.parse(res.data.goods[i].good.specification.specification)
          }
        }
        res.data.delivery = JSON.parse(res.data.delivery)
        _this.orderInfo = res.data
      }).finally(() => {
        _this.state.isRefreshing = false
      })
    },
    toCancelOrder() {
      if (this.state.isRefreshing) return;
      let _this = this;
      _this.$confirm({
        title: '确定取消订单？',
        onOk() {
          _this.state.isRefreshing = true;
          cancelOrder(router.currentRoute.params.id).then((res) => {
            _this.orderInfo = res.data
            _this.state.showSendModalState = false;
          }).catch((res) => {
            _this.$notification.warning(res)
          }).finally(() => {
            _this.state.isRefreshing = false;
          })
        }
      })
    },
    toCheckCancelOrder(state) {
      if (this.state.isRefreshing) return;
      let _this = this;
      _this.$confirm({
        title: state === 2 ? '确定不通过取消订单？' : '确定通过取消订单？',
        onOk() {
          _this.state.isRefreshing = true;
          checkCancelOrder(router.currentRoute.params.id, state).then((res) => {
            _this.state.isRefreshing = false;
            _this.toRefreshOrder();
          }).catch((res) => {
            _this.$notification.warning(res)
          }).finally(() => {

          })
        }
      })
    },
    toShowSendModal(id) {
      this.state.sendDate.id = id;
      this.state.sendDate.deliveryBusiness = null;
      this.state.sendDate.deliveryNumber = null;
      this.state.showSendModalState = true
    },
    toSendOrder() {
      if (this.state.isRefreshing) return;
      if (this.state.sendDate.deliveryNumber == null || this.state.sendDate.deliveryNumber.trim().length == 0) {
        this.$notification.warning({
          message: '快递单号不能为空'
        })
        return;
      }
      this.state.isRefreshing = true;
      let _this = this;
      sendOrder(this.state.sendDate).then((res) => {
        _this.orderInfo = res.data
        _this.state.showSendModalState = false;
      }).catch((res) => {
        _this.$notification.warning(res)
      }).finally(() => {
        _this.state.isRefreshing = false;
      })
    },

    toPreAddDelivery() {
      this.state.sendDate = {
        "deliveryBusiness": "",
        "deliveryComment": "",
        "deliveryNumber": "",
      }
      this.state.index = null;
      this.state.showSendModalState = true;

    },


    toPreEditDelivery(item, index) {
      this.state.sendDate = JSON.parse(JSON.stringify(item))
      this.state.index = index;
      this.state.showSendModalState = true;
    },

    toDeleteDelivery(index) {
      let _this = this;

      let list = JSON.parse(JSON.stringify(this.orderInfo.delivery))
      list.splice(index, 1)

      let data = {
        orderId: this.orderInfo.id,
        deliveryList: list
      }

      this.$confirm({
        title: '确定删除？',
        async onOk() {
          editDelivery(data).then(async (res) => {
            _this.loading = true;
            await _this.toRefreshOrder();
            _this.loading = false;
          }).catch((res) => {
            notification.warning({message: res.message})
          })
        }
      })

      this.state.index = index;
    },

    backToList() {
      console.log(1111)
      this.$router.back();
    },

    toSubmit() {
      if (this.state.sendDate.deliveryNumber == null || this.state.sendDate.deliveryNumber.trim().length == 0) {
        this.$notification.warning({
          message: '快递单号不能为空'
        })
        return;
      }

      let data = {
        orderId: this.orderInfo.id,
        deliveryList: this.orderInfo.delivery == null ? [] : [...this.orderInfo.delivery]
      }
      let _this = this;
      if (this.state.index == null) {
        data.deliveryList.push(this.state.sendDate);
      } else {
        data.deliveryList[this.state.index] = this.state.sendDate;
      }
      editDelivery(data).then(async (res) => {
        _this.loading = true;
        _this.state.showSendModalState = false;
        await _this.toRefreshOrder();
        _this.loading = false;
      }).catch((res) => {
        notification.warning({message: res.message})
      })
    }
  }
}
</script>

<style scoped lang="less">
.order-outer-outer {
  padding: 10px 70px;

  border-radius: 10px;

  @media screen and (max-width: 1200px) {
    padding: 10px 30px;
  }
  @media screen and (max-width: 768px) {
    padding: 10px 10px;
  }
  @media screen and (max-width: 576px) {
    padding: 0;
    border-radius: 0;
  }

  .order-outer {
    .order-status-outer {
      .order-status {
        margin: 15px 0 10px 0;

        .ant-steps-item-icon {
          display: flex;
          flex-direction: column;

          .ant-steps-icon {

          }
        }
      }
    }
  }

}


.basic-font {
  display: inline-block;
  font-size: 20px;
  white-space: nowrap;
  line-height: 31.2px;
  @media screen and (max-width: 768px) {
    font-size: 17px;
    line-height: 24.8px;
  }
  @media screen and (max-width: 576px) {
    font-size: 14px;
    line-height: 25.6px;
  }

}

.show-max-576px {
  @media screen and (min-width: 577px) {
    display: none !important;
  }
}

.show-min-576px {
  @media screen and (max-width: 576px) {
    display: none !important;
  }
}

.show-max-480px {
  @media screen and (min-width: 481px) {
    display: none !important;
  }
}

.show-min-480px {
  @media screen and (max-width: 480px) {
    display: none !important;
  }
}


.title-font {
  font-size: 1.6rem;
  font-weight: 700;
  padding: 10px 0;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  @media screen and (max-width: 768px) {
    font-size: 1.4rem;
    font-weight: 600;
    padding: 7px 0;
  }
  @media screen and (max-width: 576px) {
    font-size: 1.3rem;
    font-weight: 600;
    padding: 5px 0;
  }

}
</style>
<style lang="less">

.order-status {
  .ant-steps-item-icon {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .ant-steps-icon {

    }
  }
}

[no-padding] {
  .ant-descriptions-item-content {
    padding: 0 !important;
  }
}

[padding] {
  .ant-descriptions-item-content {
    padding: 8px 16px !important;
  }
}

.ant-descriptions-item {
  padding-bottom: 0 !important;
}
</style>